<dialog class="record-sign-in mdl-dialog">
    <h4 class="mdl-dialog__title">Sign in</h4>
    <div class="mdl-dialog__content">
        <!-- Textfield with Floating Label -->
        <div class="form-content">
            <form action="#">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="username">
                <label class="mdl-textfield__label" for="username">UserName</label>
                </div>
            </form>
            <!-- Numeric Textfield with Floating Label -->
            <form action="#">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="password" id="password">
                <label class="mdl-textfield__label" for="password">Password</label>
                <span class="mdl-textfield__error">Input user password!</span>
                </div>
            </form>
        </div>
    </div>
    <div class="mdl-dialog__actions">
        <button class="sign-in-button mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Sign in
        </button>
        <button class="cancel-button mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Cancel
            </button>
    </div>
</dialog>
   